<template>
  <div>
    <!-- 预约单 -->
      <br>
      <!-- 没有预约 -->
      <div v-if="notbaby">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="你还没有预约宝贝哟!请先去预约吧"
        />
       
      </div>
      <!-- 已预约 -->
      <template v-else>
        <div  v-for="(item,i) in data"  @click="details(data[i])">
          <van-card
            :desc="item.explains"
            :title="item.title"
            :thumb="'http://localhost:3000/images/'+ item.img1"
          >
          <template #tags>
             <span style="margin: 3%; font-size: 15px;">{{item.preTime}}</span>
          </template>
        </van-card>
        </div>
      </template>

      <van-popup
        v-model="show"
        closeable
        position="bottom"
        round
        :style="{ height: '70%' }"
      >
      <br>
      <br>
      <template v-if="information && title">
        <h3>新娘线上婚紗展</h3>
        <ul>
          <li>您好：</li>
          <li>亲爱的用户
            <van-icon name="like" color="red" />
            <span>{{information.uname}}</span>
            <van-icon name="like"  color="red"/>
          </li>
          <li>感谢你对本店的支持</li>
          <li>在下方为预约详情信息、店铺信息、预约婚纱</li>
          <li>请核对信息是否正确！</li>
        </ul>
        <h3>预约详情信息</h3>
        <br>
        <ul>
          <li><van-icon name="phone" />您的电话：<span>{{information.phone}}</span></li>
          <li><van-icon name="friends" />本次服务对象有：<span>{{information.bodNumber}}</span>人</li>
          <li><van-icon name="clock" />预约时间: <span>{{information.preTime}}</span></li>
          <li><van-icon name="shop" />预约店铺:<span>{{title.Chinese}}</span></li>
          <li ><van-icon name="gift" />预约婚纱:<span>{{information.title}}</span></li>
          <li ><van-icon name="map-marked" />前往地点:<span>{{title.address}}</span></li>
          <li ><van-icon name="map-marked" />店铺电话:<span>{{title.TEL}}</span></li>
        </ul>
    
      <h3>店铺</h3>
          <van-card
            centered
            :title="title.Chinese"
            :desc="title.English_name"
            :thumb="'http://localhost:3000/images/'+ title.img"
          />
          <ul>
            <li><van-icon name="phone-circle" />电话：<span>{{title.TEL}}</span></li>
            <li><van-icon name="map-marked" />地点：<span>{{title.address}}</span></li>
            <li><van-icon name="underway" />营业时间: <span>{{title.phone}}</span></li>
            <li><van-icon name="clock" />具体时间:<span>{{title.time}}</span></li>
          </ul>
        
        <h3>预约婚纱</h3>
        <div v-if="information" >
          <van-card
          centered
          :desc="information.explains"
          :title="information.title"
          :thumb="'http://localhost:3000/images/'+ information.img1"
          @click="goto(information.westerndetail_id)"
          />
        </div>
          
          
        <h3>注意事件</h3>
        <ul>
          <li><van-icon name="warning" />请注意预约消息为实时传给店铺，店铺会电话联系您确定预约信息</li>
          <li><van-icon name="warning" />如果店铺没有联系你，可以拨打电话去确定预约</li>
          <li><van-icon name="warning" />如果店铺没有联系和店铺电话打不通时可向我们进行投诉</li>
          <li><van-icon name="warning" />如果店铺给您带来什么不好的体验，随时可举报投诉，我们会妥善处理</li>
          <li><van-icon name="warning" />体验婚纱时请配合店员，如店员提醒后损坏物品需照价赔偿</li>
          <li><van-icon name="warning" />如果因时间问题需要取消订单，请电话告知店铺</li>
          <li><van-icon name="warning" />如果预约未到并没有告知店铺，店铺可进行登记，如果多次则我们会进行拉黑等处罚</li>
        </ul>
      </template>
    </van-popup>
      
    <wish-not v-if="!$store.state.uname"></wish-not>
    <!-- 猜你喜欢内容 -->
    <guesst></guesst>
    <!-- 回顶 -->
    <top></top>
    
  </div>
</template>

<script>
import WishShopping from "@/components/WishShopping.vue";
import Guesst from "@/components/Guesst.vue";
import WishNot from "@/components/WishNot.vue";
import Top from "@/components/Top.vue";
export default {
  components: { WishShopping, Guesst, WishNot, Top},
  data() {
    return {
      show: false,
      notbaby:true,
      data:null,
      title:null,
      time:null,
      information:null,
    };
  },
  methods: {
    details(row){
      this.show = true
      this.time = row.preTime
      this.information = row
      let params = `westerndetail_id=${row.westerndetail_id}`
      this.axios.post("/pro_store",params).then((res) => {
        this.title = res.data.results[0]
        console.log(this.title,"详情");
      })
    },
    goto(id){
      let lid = id - 1
      this.$router.push(`/westernDetail?lid=${lid}`)
    }
  },
  mounted(){
      let params = `uid=${this.$store.state.uid}`
      console.log(params);
      this.axios.post("/reservation_view", params).then((res) => {
          console.log("预约单",res);
          if(res.data.code == 200){
            this.data = res.data.results;
            this.notbaby = false
          }else{
            this.notbaby = true
          }
      }); 
  },
};
</script>
<style lang="scss" scoped>
 li{
  margin-left: 3%;
  padding: 1% 0;
  font-size: 16px;
   span{
    font-weight:600;
   }
 }
  ::v-deep  .custom-image .van-empty__image {
    width: 70px;
    height: 70px;
  }
  ::v-deep .van-card__title{
    font-weight:700;
    font-size :20px;
    line-height:30px;
  }
  ::v-deep .van-card__desc{
    font-size :20px;
    margin: 3%;
    // line-height: 30px;
    // margin: auto;
  }
</style>
<!-- <style scoped src="../assets/CSS/like.css"> -->
<style scoped src="@/assets/CSS/wish.css"></style>
</style>